<template>
  <div :class="[ 'free-tab', { 'free-tab-active': isTabActive } ]">
    <div class="free-tab-control">
      <div class="free-tab-control-btn" @click="changeTab('left')">
        <div class="free-tab-control-btn-lebel">左</div>
        <div class="free-tab-control-btn-tip"></div>
      </div>
      <div class="free-tab-control-dividing"></div>
      <div class="free-tab-control-btn" @click="changeTab('right')">
        <div class="free-tab-control-btn-lebel">右</div>
        <div class="free-tab-control-btn-tip"></div>
      </div>
    </div>

    <div class="free-tab-show">
      <div class="free-tab-show-label">{{ tab.label }}</div>
      <div class="free-tab-show-tip-wrap">
        <div :class="[ 'free-tab-show-tip', { 'free-tab-show-tip-active': isTipLeftActive } ]"></div>
        <div class="free-tab-show-tip-dividing"></div>
        <div :class="[ 'free-tab-show-tip', { 'free-tab-show-tip-active': isTipRightActive } ]"></div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'FreeTab',

  props: {
    tab: Object,
    freeContent: Object,
  },

  data() {
    return {
      isTabActive: false,
      isTipLeftActive: false,
      isTipRightActive: false
    }
  },

  watch: {
    'freeContent.left' () {
      updateTab(this)
    },
    'freeContent.right' () {
      updateTab(this)
    }
  },

  mounted() {
    updateTab(this)
  },

  methods: {
    changeTab(section) {
      switch (section) {
        case 'left':
          if (this.$game.data.state.interface.freeContent.right === this.tab.name) {
            this.$game.data.state.interface.freeContent.right = 'FreeEmpty'
          }
          this.$game.data.state.interface.freeContent.left = this.tab.name
          break;
        case 'right':
          if (this.$game.data.state.interface.freeContent.left === this.tab.name) {
            this.$game.data.state.interface.freeContent.left = 'FreeEmpty'
          }
          this.$game.data.state.interface.freeContent.right = this.tab.name
          break;
      }
    }
  }
}

let updateTab = (that) => {
  if (that.freeContent.left === that.tab.name || that.freeContent.right === that.tab.name) {
    that.isTabActive = true
    if (that.freeContent.left === that.tab.name) {
      that.isTipLeftActive = true
      that.isTipRightActive = false
    }
    else {
      that.isTipRightActive = true
      that.isTipLeftActive = false
    }
  }
  else {
    that.isTabActive = false
    that.isTipLeftActive = false
    that.isTipRightActive = false
  }
}
</script>

<style lang="scss">

</style>
